<template>
  <view class="news-card" :class="{ 'top-news': isTop, 'search-news': showSearch }">
    <view class="title">{{ title }}</view>
    <view class="meta">
      <view class="top-tag" v-if="isTop">置顶</view>
      <view class="author">{{ author }}</view>
      <view class="comments">{{ comments }}评</view>
      <view class="time">{{ time }}</view>
    </view>
   
    <view class="slot-container">
      <slot name="tips"></slot>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: "新闻标题",
      required: true
    },
    isTop: {
      type: Boolean,
      default: false,
      required: true
    },
    author: {
      type: String,
      default: "来源",
      required: true
    },
    comments: {
      type: Number,
      default: 0,
      required: true
    },
    time: {
      type: String,
      default: "2025.1.1"
    },
    showSearch: {
      type: Boolean,
      default: false
    },
    tags: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style scoped>
.news-card {
  margin: 10rpx;
  padding: 15rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
}
.title {
  font-size: 32rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}
.meta {
  display: flex;
  font-size: 24rpx;
  color: #666;
  flex-wrap: wrap; /* 增加换行，避免内容溢出 */
}
.top-tag {
  color: red;
  margin-right: 10rpx;
}
.author, .comments, .time {
  margin-right: 15rpx;
}
.search-tags {
  margin-top: 10rpx;
  font-size: 24rpx;
}
.tag {
  display: inline-block;
  background-color: #e6e6e6;
  border-radius: 12rpx;
  padding: 2rpx 10rpx;
  margin-right: 8rpx;
  margin-top: 5rpx; /* 增加上下间距，避免标签拥挤 */
}
.top-news {
  border-left: 6rpx solid red;
}
/* 插槽容器样式 */
.slot-container {
  margin-top: 10rpx;
  padding-top: 10rpx;
  border-top: 1px solid #eee;
}
</style>